<template>
  <div class="mode-table">
    <div class="mode-table-main">
      <a-table :data="objData.tableDataList" :bordered="false" :pagination="false">
        <template #columns>
          <a-table-column title="节点名称" data-index="nodeName"></a-table-column>
          <a-table-column title="节点编号" data-index="nodeCode"></a-table-column>
          <a-table-column title="节点颜色" data-index="color"></a-table-column>
          <a-table-column title="操作" :width="220" align="center">
            <template #cell="{ record }">
              <a-button type="text" status="success" style="color: #409eff" @click="funCheckDetail(record)"
                >详情</a-button
              >
              <a-button type="text" status="success" style="color: #00b3b3" @click="funEditTable(record)"
                >编辑</a-button
              >
              <a-button type="text" status="warning" @click="funDelNode(record)">删除</a-button>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
    <div class="mode-table-footer">
      <a-pagination
        :total="objData.total"
        :current="objData.currentPage"
        :page-size="objData.pageSize"
        show-page-size
        show-total
        show-jumper
        @change="handleCurrentChange"
        @page-size-change="handleSizeChange"
      />
    </div>
  </div>
</template>
<script setup>
import { reactive, defineEmits, defineProps, defineExpose } from 'vue'
import { Modal, Message } from '@arco-design/web-vue'
import { apiHome } from '@/api/healthAssessment'
const emit = defineEmits(['funCheckDetail', 'funEditTable'])
const props = defineProps({
  parentId: {
    type: String,
    default: ''
  }
})
const objData = reactive({
  tableDataList: [],
  total: 1,
  currentPage: 1,
  pageSize: 10
})
// 分页 当前页码
const handleCurrentChange = (value) => {
  objData.currentPage = value
  funTableDataList()
}
// 分页 分页每页数
const handleSizeChange = (value) => {
  objData.pageSize = value
  funTableDataList()
}
// 获取列表
const funTableDataList = () => {
  objData.tableDataList = []
  apiHome
    .getPortraitDataList(props.parentId, objData.currentPage, objData.pageSize)
    .then((res) => {
      if (res.code === 200) {
        objData.tableDataList = res.data.list
        objData.total = +res.data.total
      }
    })
    .catch(() => {})
}
// 查看详情
const funCheckDetail = (data) => {
  emit('funCheckDetail', data)
}
// 编辑
const funEditTable = (data) => {
  emit('funEditTable', data)
}
// 删除 操作
const funDelNode = (data) => {
  Modal.confirm({
    title: '提示',
    content: '是否删除当前节点？',
    modalClass: 'tipModal',
    onOk: () => {
      apiHome
        .getPortraitDel(data.id)
        .then((res) => {
          if (res.code === 200) {
            Message.success('节点删除成功!')
            funTableDataList()
          } else {
            Message.error(res.message)
          }
        })
        .catch(() => {})
    }
  })
}
defineExpose({
  funTableDataList
})
</script>
<style lang="less" scoped>
.mode-table {
  height: calc(100% - 48px);
  width: 100%;
  &-main {
    height: calc(100% - 48px);
  }
  &-footer {
    margin-top: 16px;
    display: flex;
    justify-content: end;
  }
}
</style>
